<template>
  <div class="distributionPeople">
    <el-row class="assign_main">
      <el-col :span="24"
              class="assign_top">
        <el-col :span="7"
                align="right">
          <span class="word_rule">账号</span>
          <el-input class="input_rule"
                    v-model="account"
                    placeholder="请输入账号"></el-input>
        </el-col>
        <el-col :span="7"
                align="right">
          <span class="word_rule">姓名</span>
          <el-input class="input_rule"
                    v-model="name"
                    placeholder="请输入姓名"></el-input>
        </el-col>
        <el-col :span="7"
                align="right">
          <span class="word_rule">手机</span>
          <el-input class="input_rule"
                    v-model="phone"
                    placeholder="请输入手机号"></el-input>
        </el-col>
        <el-col :span="3"
                align="right">
          <el-button class="search_btn">搜索</el-button>
        </el-col>
      </el-col>
      <el-col :span="24"
              class="assign_table">
        <el-table border
                  :data="tableData"
                  style="width: 100%">
          <el-table-column prop="systemAccount"
                           label="系统账号">
          </el-table-column>
          <el-table-column prop="username"
                           label="用户姓名">
          </el-table-column>
          <el-table-column prop="state"
                           label="状态">
          </el-table-column>
          <el-table-column prop="phone"
                           label="手机号">
          </el-table-column>
          <el-table-column prop="createTime"
                           label="创建日期">
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24"
              align="center"
              class="assign_page">
        <el-pagination id="pagination"
                       background
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[10]"
                       :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </el-col>
      <el-col :span="24"
              align="right">
        <el-button class="normal_btn">确定</el-button>
        <el-button class="normal_btn">返回</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      account: "",
      name: "",
      phone: "",
      tableData: [
        {
          systemAccount: '13000000000',
          username: '测试1',
          state: '正常',
          phone: '13000000000',
          createTime: '2018-10-1'
        },
        {
          systemAccount: '13000000001',
          username: '测试2',
          state: '正常',
          phone: '13000000002',
          createTime: '2018-10-1'
        },
        {
          systemAccount: '13000000002',
          username: '测试3',
          state: '正常',
          phone: '13000000002',
          createTime: '2018-10-1'
        },
        {
          systemAccount: '13000000003',
          username: '测试4',
          state: '正常',
          phone: '13000000003',
          createTime: '2018-10-1'
        }
      ],
      currentPage: 1,
      pagesize: 10,
      total: 10
    }
  },
  methods: {
    handleCurrentChange () {

    }
  }
}
</script>
<style lang="scss" scoped>
.assign_main {
  padding: 20px;
}
.assign_top {
  margin-bottom: 20px;
}
.word_rule {
  font-size: 14px;
  margin-right: 5px;
}
.input_rule {
  width: 70%;
}
.search_btn {
  width: 100px;
  background: #1abc9c;
  color: #fff;
}
.assign_table {
  margin-bottom: 20px;
}
.assign_page {
  margin-bottom: 10px;
}
.normal_btn {
  width: 80px;
  background: #1abc9c;
  color: #fff;
}
/deep/ #pagination .el-pager .active {
  background: #1abc9c;
}
/deep/ #pagination .el-pager .active:hover {
  color: #fff;
}
/deep/ #pagination .el-pager li:hover {
  color: #1abc9c;
}
</style>

